
import React,{Component} from 'react'
import {Form,Icon,Input,Button,Checkbox} from 'antd'
import './WtLogin.css'


import Particles from 'react-particles-js'
import {connect} from 'react-redux'
import {ACTION_AUTH,ACTION_NOTIFY} from '../store/action'
import {Link} from 'react-router-dom'

//util
import WtTokenManager from '../util/WtTokenManager'
import WtHostPost from '../util/WtHostPost'
import WtNotification from '../util/WtNotification'
import WtDefaultHandlePostError from '../util/WtDefaultHandlePostError'
import WtLogger from '../util/WtLogger'
import WtValidate from "../util/WtValidate"
//const
const FormItem = Form.Item;

class WtLoginForm extends Component{
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                WtLogger.log('Received values of form: ', values);
                const {onFinish} = this.props;
                if(onFinish){
                    onFinish(values);
                }
            }
        });
    };

    render(){
        const {getFieldDecorator} = this.props.form;

        return(
            <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem>
                    {getFieldDecorator('email', {
                        rules: [
                            { required: true, message:'请输入用户邮箱'},
                            { validator: WtValidate.validateEmail }
                        ],
                    })(
                        <Input prefix={<Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="邮箱" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: '请输入密码!' }],
                    })(
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                    })(
                        <Checkbox>自动登录</Checkbox>
                    )}
                    <Link className="login-form-forgot" to="/forgot-password">忘记密码</Link>
                    <Button loading={this.props.submitting} type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </FormItem>
            </Form>

        );
    }
}

const WtLoginFormWrapper = Form.create()(WtLoginForm);

class WtLogin extends Component{
    constructor(props){
        super(props);
        this.state = {
            submitting:false,
        };
    }

    onFinish = (values) => {
        this.setState({submitting:true});
        WtHostPost('/login',{
            email:values.email,
            password:values.password,
        }).then(({json,header}) => {
            if(json.code === 0){
                WtTokenManager.setToken(json.user);
                this.props.login(json.user);
            } else if(json.code === 429){
                WtNotification.error('操作太过频繁，请稍后再试');
                this.setState({submitting:false});
            } else {
                throw json;
            }
        }).catch((error) => {
            WtNotification.error(error.msg);
            this.setState({submitting:false});
            WtDefaultHandlePostError(error);
        });
    };

    render(){
        return (
            <div id={"login"}>
                <Particles
                    params={{
                        particles: {
                            number : {
                                value : 100
                            },
                            line_linked: {
                                shadow: {
                                    enable: true,
                                    color: "#FFFFFF",
                                    blur: 2
                                }
                            }
                        }
                    }}
                    style={{
                        height : '%100',
                        background : 'rgb(19,19,41)',
                    }}
                    height={"950px"}
                />
                <div className="wt-login">
                    <div className="nav-logo" onClick={() => this.props.history.push('/')}/>
                    <h1 className="title">图书管理系统</h1>
                    <WtLoginFormWrapper
                        onFinish={this.onFinish}
                        submitting={this.state.submitting}
                    />
                </div>
            </div>


        );
    }
}


const mapDispatchToProps = {
    login:(userInfo) => {
        return {
            type:ACTION_AUTH.LOGIN,
            payload:{
                userInfo,
            }
        }
    },
    notifyChange:(count) => {
        return {
            type:ACTION_NOTIFY.CHANGE,
            payload:{
                count,
            }
        }
    },
};

export default connect(null,mapDispatchToProps)(WtLogin);
